/**
* 头部菜单
*/
<template>
  <div>
    <div style="width: 100%; text-align: right">
      <el-dropdown @command="handleCommand" >
        <div style="display: flex;align-items: center;">
          <el-avatar :size="36">
            {{ oauth2.getAuthData("nickName") }}
          </el-avatar>
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-switch-button" command="exit"
            >登出</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-edit" command="modifyPwd"
            >修改密码</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <el-dialog title="修改密码" :visible.sync="modifyFormVisible" width="60%">
      <el-form
        :model="pwdForm"
        status-icon
        :rules="rules"
        ref="pwdForm"
        label-width="150px"
      >
        <el-form-item label="旧密码" prop="oldPwd">
          <el-input v-model="pwdForm.oldPwd" type="password"></el-input
        ></el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="pwdForm.newPwd" type="password"></el-input
        ></el-form-item>
        <el-form-item label="重复新密码" prop="newPwd2">
          <el-input v-model="pwdForm.newPwd2" type="password"></el-input
        ></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('pwdForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { UserPwdModify } from "../api/userApi";
export default {
  name: "navcon",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.pwdForm.newPwd2 !== "") {
          this.$refs.pwdForm.validateField("newPwd2");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.pwdForm.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      collapsed: true,
      imgshow: require("../assets/img/show.png"),
      imgsq: require("../assets/img/sq.png"),
      user: {},
      modifyFormVisible: false,
      pwdForm: {
        oldPwd: "",
        newPwd: "",
        newPwd2: "",
      },
      rules: {
        oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        newPwd: [{ required: true, validator: validatePass, trigger: "blur" }],
        newPwd2: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    handleCommand(cmd) {
      if (cmd == "exit") {
        this.oauth2.logout();
      } else if (cmd == "modifyPwd") {
        this.modifyFormVisible = true;
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          UserPwdModify({
            uid: this.oauth2.getAuthData("uid"),
            oldPwd: this.pwdForm.oldPwd,
            newPwd: this.pwdForm.newPwd,
          }).then(() => {
            this.$notify({
              title: "成功",
              message: "修改成功，请重新登录",
              type: "success",
            });
            this.modifyFormVisible = false;
          });
          return true;
        } else {
          return false;
        }
      });
    },
  },
};
</script>